
; (function () {

    //             100/ 350=400/800  
    //1.  小区域=(大区域/大图)*小图
    //正比公式 大区域/小区域=大图/小图
    //    
    $.fn.extend({
        zoom() {
            let self = this;
            let w = this.find(".bigArea").outerWidth() / this.find(".bigImg").outerWidth() * this.find(".middleImg").outerWidth();
            this.find(".middleArea").css("width", w);

            let h = this.find(".bigArea").outerHeight() / this.find(".bigImg").outerHeight() * this.find(".middleImg").outerHeight();
            this.find(".middleArea").css("height", h);

            //比例
            let oScore = this.find(".bigArea").width() / this.find(".middleArea").width()

            //进入要显示
            this.find(".middleImg").on("mouseenter", function () {
                self.find(".middleArea").show();
                self.find(".bigArea").show();
            }).on("mouseleave", function () {
                self.find(".middleArea").hide();
                self.find(".bigArea").hide();
            })

            this.find(".middleImg").on("mousemove", function (e) {
                var disX = e.pageX - self.find(".middleImg").offset().left - self.find(".middleArea").width() / 2;
                var disY = e.pageY - self.find(".middleImg").offset().top - self.find(".middleArea").height() / 2;
                if (disX <= 0) {
                    disX = 0
                }
                if (disY <= 0) {
                    disY = 0
                }

                var maxX = self.find(".middleImg").outerWidth() - self.find(".middleArea").outerWidth()
                var maxY = self.find(".middleImg").outerHeight() - self.find(".middleArea").outerHeight()
                if (disX > maxX) {
                    disX = maxX;
                }
                if (disY > maxY) {
                    disY = maxY;
                }


                self.find(".middleArea").css({
                    left: disX,
                    top: disY,
                })

                self.find(".bigImg").css({
                    left: oScore * disX * -1,
                    top: oScore * disY * -1,
                })

            })

            //事件委托
            this.find(".small li").on("mousemove", function () {
                var index = $(this).index()
                /* self.find(".middleImg  img").attr("src", `images/images1/${index + 1}_2.jpg`);
                self.find(".bigImg").attr("src", `images/images1/${index + 1}_3.jpg`); */


                self.find(".middleImg  img").attr("src", `imgaes/images1/${index + 1}_2.jpg`);
                self.find(".bigImg").attr("src", `imgaes/images1/${index + 1}_3.jpg`);
            })
        }


    })



})();



$(window).load(function () {
    $("#box").zoom()
})
